class SharedDiv extends HTMLElement {
    constructor() {
        super();
        const shadow = this.attachShadow({ mode: 'open' });
        shadow.innerHTML = `
         <style>
                .header {
                    display: flex;
                    justify-content: space-between;
                    align-items: center;
                    background-color: #B0E0E6;
                    padding: 10px;
                    font-family: Arial, sans-serif;
                    flex-direction: column;
                    align-items: flex-end;
                }
                .grid-content {
                    display: flex;
                    align-items: center;
                }
                .centera {
                    text-decoration: none;
                    color: black;
                    margin-right: 10px;
                }
                .centera:hover {
                    color: orange;
                    cursor: pointer;
                }
                p {
                    color: #8c939d;
                    margin: 0;
                }
                a {
                    text-decoration: none;
                    color: #8c939d;
                }
            </style>
            <div id="vue-container"></div>  
            
`;
    }

    connectedCallback() {
        // 在组件挂载后初始化Vue实例
        new Vue({
            el: this.shadowRoot.querySelector('#vue-container'),
            mounted(){
              this.thefirst();
            },
            data: {
                isLogin: true,  // 模拟数据，根据实际情况调整
                name: '' , // 模拟数据，根据实际情况调整
                password: '',
            },
            methods:{
                thefirst(){
                    // 在index.html页面加载时读取
                    this.name = getCookie("name");
                    this.password = getCookie("password");

                    if (this.name !=null && this.password !=null){
                        this.isLogin = true;
                    }
                    // 辅助函数，用于获取cookie的值
                    function getCookie(name) {
                        let cookieArr = document.cookie.split(";");
                        for(let i = 0; i < cookieArr.length; i++) {
                            let cookiePair = cookieArr[i].trim().split("=");
                            if (cookiePair[0] === name) {
                                return cookiePair[1];
                            }
                        }
                        return "";
                    }
                },
            },
            template: `
                <div class="header">
                    <div style="display: flex">
                        <div class="grid-content" v-if="isLogin">
                            欢迎：<p>{{ name }}</p>
                        </div>
                        <div class="grid-content" v-else>
                            您好，<a href="log_in.html">请登录</a> <a href="log_in.html">免费注册</a>
                        </div>
                        <div class="grid-content">
                           &nbsp;&nbsp;&nbsp; || <a href="index.html" class="centera">论坛首页</a>&nbsp; ||
                            <a href="center.html" class="centera">个人中心</a>&nbsp; ||
                            <a href="guide.html" class="centera">萌新指南</a>&nbsp; ||
                            <a href="about.html" class="centera">关于我们</a>&nbsp; ||
                            <a href="log_in.html" class="centera">退出登录</a>&nbsp;
                        </div>
                    </div>
                </div> 
`
        });
    };
}

customElements.define('shared-div', SharedDiv);

